<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">基础信息</span>
        <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
      </div>

      <!--初始化流程加载自定义表单信息-->
      <el-col :span="16" :offset="4" v-if="customForm.visible">
        <div>
            <component ref="refCustomForm" :disabled="customForm.disabled" v-bind:is="customForm.formComponent" :model="customForm.model"
                        :customFormData="customForm.customFormData" :isNew = "customForm.isNew"></component> 
        </div>
        <div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;" v-if="finished === 'true'">
          <el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleComplete">审批</el-button>
          <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="SelectUser('1')">委派</el-button>
          <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="SelectUser('2')">转办</el-button>
          <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
          <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleAddSign">加签</el-button>
          <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleJump">跳转</el-button>
          <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
          <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
        </div>
      </el-col>
      
      <!--初始化流程加载online提交表单信息 目前先不用这个了-->
      <el-col :span="16" :offset="4" v-if="onlineForm.visible">
            <a-form ref="refOnlForm" >
                <a-row v-for="(itemCommon, indexInner) in onlineForm.onlineFormData" :key="indexInner"  :label="itemCommon.onlTitleName" :model="itemCommon.cgformHeadId" >
                  <a-col :span="parseInt(itemField.fieldDataTopInfo)" v-for="(itemField, index2) in itemCommon.fieldAll" :key="index2">
                      <a-form-item :label="itemField.dbFieldTxt"  :model="itemField" :key="index2">
                        <component :is="itemField.tableTypeCode" :model="itemField" :key="index2" :fcz="itemField" @commonComponent ="commonComponent" >
                        </component>
                      </a-form-item>
                  </a-col>
                </a-row>
                <a-form-item style="text-align: center;" v-if="onlineForm.isNew != false">
                  <a-button type="primary" @click="submitOnlForm">提交</a-button>
                  <a-button style="margin-left:30px;" @click="resetOnlForm">重置</a-button>
                </a-form-item>
            </a-form>   
      </el-col>
      
      <!--流程加载online显示表单信息-->
      <el-col :span="16" :offset="4" v-if="onlineViewForm.visible">
            <a-form ref="refViewOnlForm">
                <a-row v-for="(itemCommon, indexInner) in onlineViewForm.onlineFormData" v-if="indexInner==0" :key="indexInner"  :label="itemCommon.onlTitleName" :model="itemCommon.cgformHeadId" >
                  <a-col :span="parseInt(itemField.fieldDataTopInfo)" v-for="(itemField, index2) in itemCommon.fieldAll" :key="index2">
                      <a-form-item :label="itemField.dbFieldTxt"  :model="itemField" :key="index2">
                        <component :disabled="onlineViewForm.disabled" :is="itemField.tableTypeCode" :value="onlineViewForm.model[itemField.dbFieldName]" :key="index2" :fcz="itemField" @commonComponent ="commonComponent" >
                        </component>
                      </a-form-item>
                  </a-col>
                </a-row>
                <!-- 子表单区域 -->
                <a-tabs >
                    <a-tab-pane v-for="(itemCommon, indexInner) in onlineViewForm.onlineFormData" :key="indexInner" v-if = "indexInner>0 && itemCommon.tableName === onlineFormItem.tableForm.tableName[indexInner-1] && onlineFormItem.tableForm.columns[indexInner-1] != undefined" 
                      :tab="itemCommon.tableTxt"  :forceRender="true" >
                      <j-editable-table  
                          :model="itemCommon.cgformHeadId"
                          :columns="onlineFormItem.tableForm.columns[indexInner-1]"
                          :dataSource="onlineFormItem.dataSource[indexInner-1]"
                          :maxHeight="300" 
                          :rowNumber="true"
                          />
                    </a-tab-pane>
                    <a-tab-pane v-else-if = "indexInner>0 && itemCommon.tableName === onlineFormItem.tableForm.tableName[indexInner-1] && onlineFormItem.tableForm.columns[indexInner-1] == undefined" 
                      :tab="itemCommon.tableTxt" :model="itemCommon.cgformHeadId" :forceRender="true" >
                      <a-row>
                       <a-col :span="parseInt(itemField.fieldDataTopInfo)" v-for="(itemField, index2) in itemCommon.fieldAll" :key="index2">
                           <a-form-item :label="itemField.dbFieldTxt"  :model="itemField" :key="index2" v-if="onlineFormItem.dataSource[indexInner-1][0] != undefined"> 
                             <component :is="itemField.tableTypeCode" :disabled="true" :value="onlineFormItem.dataSource[indexInner-1][0][itemField.dbFieldName]" :key="index2" :fcz="itemField" @commonComponent ="commonComponent" >
                             </component>
                           </a-form-item>
                           <a-form-item :label="itemField.dbFieldTxt"  :model="itemField" :key="index2" v-else>
                             <component :is="itemField.tableTypeCode" :disabled="true"  :key="index2" :fcz="itemField" @commonComponent ="commonComponent" >
                             </component>
                           </a-form-item>
                       </a-col>
                      </a-row>
                    </a-tab-pane>
                </a-tabs>
            </a-form>   
            <div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;" v-if="finished === 'true'">
              <el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleComplete">审批</el-button>
              <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="SelectUser('1')">委派</el-button>
              <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="SelectUser('2')">转办</el-button>
              <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
              <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleAddSign">加签</el-button>
              <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleJump">跳转</el-button>
              <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
              <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
            </div>
      </el-col>

      <!--流程处理表单设计器模块,从flowable表里获取表单数据-->
      <el-col :span="16" :offset="4" v-if="variableOpen">
          <div > <!--处理流程过程中显示formdesigner表单信息-->
            <form-builder v-if = "this.startUserForm.isStartUserNode && this.startUserForm.editFormType === 'oa' && finished === 'true'" ref="refStartBuilder" v-model="formVal" :buildData="formViewData" />
            <form-viewer v-else ref="formViewer" v-model="formVal" :buildData="formViewData" />
		      </div>
        <div style="margin-left:10%;margin-bottom: 30px">
           <!--对上传文件进行显示处理，临时方案 add by nbacheng 2022-07-27 -->
           <el-upload action="#" :on-preview="handleFilePreview" :file-list="fileList" v-if="fileDisplay" />
        </div>  
        <!--流程各个节点表单加载显示formdesigner表单-->
        <div class="test-form" v-for="(taskform,index) in taskFormList" v-if="taskFormViewOpen && taskFormVal[index]">
          <form-viewer ref="taskFormView" v-model="taskFormVal[index]" :buildData="taskform" />
        </div>   
        <div class="test-form" v-if="taskFormOpen && finished === 'true'">
          <form-builder ref="taskFormBuilder" v-model="taskFormVal" :buildData="taskFormData" />
        </div>
        <div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;" v-if="finished === 'true'">
          <el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleComplete">审批</el-button>
          <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="SelectUser('1')">委派</el-button>
          <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="SelectUser('2')">转办</el-button>
          <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
          <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleAddSign">加签</el-button>
          <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleJump">跳转</el-button>
          <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
          <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
        </div>
      </el-col>

      <!--初始化流程加载默认formdesigner表单信息-->
      <el-col :span="16" :offset="4" v-if="formConfOpen">
        <div class="test-form">
          <form-builder ref="formBuilder" v-model="formVal" :buildData="formCode" />
          <div style="margin-bottom:15px;text-align:center">
              <el-button type="primary" class="button" @click="submitForm">提交</el-button>
          </div>
        </div>
      </el-col>
      <!--初始化流程加载显示formdesigner表单-->
      <el-col :span="16" :offset="4" v-if="formViewOpen">
        <div class="test-form">
          <form-viewer ref="formView" v-model="formVal" :buildData="formCode" />
        </div>
      </el-col>
      
    </el-card>

    <!--流程流转记录-->
    <el-card class="box-card" v-if="flowRecordList">
      <div slot="header" class="clearfix">
        <span class="el-icon-notebook-1">审批记录</span>
      </div>
      <el-col :span="16" :offset="4">
        <div class="block">
          <el-timeline>
            <el-timeline-item v-for="(item,index ) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)"
              :color="setColor(item.finishTime)">
              <p style="font-weight: 700">{{item.taskName}}</p>
              <el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover">
                {{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
              </el-card>
              <el-card v-if="item.activityType === 'userTask'" :body-style="{ padding: '10px' }">
                <label v-if="item.assigneeName" style="font-weight: normal;margin-right: 30px;">实际办理：
                  {{item.assigneeName}}
                  <el-tag type="info" size="mini">{{item.deptName}}</el-tag>
                </label>
                <label v-if="item.candidate" style="font-weight: normal;margin-right: 30px;">候选办理：
                  {{item.candidate}}</label>
                <label style="font-weight: normal">接收时间： </label><label
                  style="color:#8a909c;font-weight: normal">{{item.createTime}}</label>
                <label v-if="item.finishTime" style="margin-left: 30px;font-weight: normal">办结时间： </label><label
                  style="color:#8a909c;font-weight: normal">{{item.finishTime}}</label>
                <label v-if="item.duration" style="margin-left: 30px;font-weight: normal">耗时： </label><label
                  style="color:#8a909c;font-weight: normal">{{item.duration}}</label>
                <p v-if="item.listFlowCommentDto.length > 0" v-for="(commentitem,index ) in item.listFlowCommentDto" :key="index">
                   <el-tag type="success" v-if="commentitem.type === '1'"> {{commentitem.comment}}</el-tag>
                   <el-form  v-if= "commentitem.type === '1' && fileitem.type === '1'" v-for="(fileitem,fileindex ) in item.listcommentFileDto" :key="fileindex">
                     <el-form-item label="附件"  prop="listcommentFileDto">
                          <j-upload  v-if="fileitem.type === '1'" v-model="fileitem.fileurl" :disabled = "true"  text="上传的文件" ></j-upload>                 
                     </el-form-item>
                   </el-form>  
                   <el-tag type="warning" v-if="commentitem.type === '2'"> {{"退回: "+ commentitem.comment}}</el-tag>
                   <el-form v-if= "commentitem.type === '2' && fileitem.type === '2'" v-for="(fileitem,fileindex ) in item.listcommentFileDto" :key="fileindex">
                     <el-form-item label="附件"  prop="listcommentFileDto">
                          <j-upload v-if="fileitem.type === '2'" v-model="fileitem.fileurl" :disabled = "true"  text="退回上传的文件" ></j-upload> 
                     </el-form-item>
                   </el-form>  
                   <el-tag type="danger" v-if="commentitem.type === '3'">  {{"驳回: "+commentitem.comment}}</el-tag>
                   <el-form v-if= "commentitem.type === '3' && fileitem.type === '3' " v-for="(fileitem,fileindex ) in item.listcommentFileDto" :key="fileindex">
                     <el-form-item label="附件"  prop="listcommentFileDto">
                        <j-upload v-if="fileitem.type === '3'"  v-model="fileitem.fileurl" :disabled = "true"  text="驳回上传的文件" ></j-upload>
                     </el-form-item>
                   </el-form>  
                   <el-tag type="success" v-if="commentitem.type === '4'">  {{commentitem.comment + "\xa0\xa0\xa0\xa0委派时间:" + commentitem.time}}</el-tag>
                   <el-form  v-if= "commentitem.type === '4' && fileitem.type === '4'" v-for="(fileitem,fileindex ) in item.listcommentFileDto" :key="fileindex">
                     <el-form-item label="附件"  prop="listcommentFileDto">
                          <j-upload  v-if="fileitem.type === '4'" v-model="fileitem.fileurl" :disabled = "true"  text="委派上传的文件" ></j-upload>                 
                     </el-form-item>
                   </el-form>  
                   <el-tag type="success" v-if="commentitem.type === '5'">  {{commentitem.comment + "\xa0\xa0\xa0\xa0转办时间:" + commentitem.time}}</el-tag>  
                    <el-form v-if= "commentitem.type === '5' && fileitem.type === '5'" v-for="(fileitem,fileindex ) in item.listcommentFileDto" :key="fileindex">
                      <el-form-item label="附件"  prop="listcommentFileDto" >
                         <j-upload v-model="fileitem.fileurl" :disabled = "true"  text="转办上传的文件" ></j-upload>
                      </el-form-item>
                    </el-form>  
                    <el-tag type="warning" v-if="commentitem.type === '7'"> {{"撤回: "+commentitem.comment}}</el-tag>  <!--撤回信息-->
                    <el-tag type="warning" v-if="commentitem.type === '6'"> {{commentitem.comment}}</el-tag>  <!--终止信息-->
                    <el-tag type="warning" v-if="commentitem.type === '8'"> {{commentitem.comment}}</el-tag>  <!--跳过信息-->
                    <el-tag type="success" v-if="commentitem.type === '9'"> {{commentitem.comment}}</el-tag>  <!--前加签-->
                    <el-tag type="success" v-if="commentitem.type === '10'"> {{commentitem.comment}}</el-tag>  <!--后加签-->
                    <el-tag type="success" v-if="commentitem.type === '11'"> {{commentitem.comment}}</el-tag>  <!--多实例加签-->
                    <el-tag type="success" v-if="commentitem.type === '12'"> {{commentitem.comment}}</el-tag>  <!--跳转信息-->
                 </p>
              </el-card>
              <el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover">
                {{ item.createTime }} 流程结束
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-picture-outline">流程图</span>
      </div>
      <!-- 流程图 -->
      <bpmn-modeler v-if="xmlShow" ref="refNode" :xml="xmlData" :taskData="taskList" :users="users" :groups="groups"
        class="bpmn-modeler" :categorys="categorys" :is-view="false" />
    </el-card>

    <!--审批正常流程-->
    <a-modal :z-index="100" :title="completeTitle" @cancel="completeOpen = false" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
      <el-form ref="taskForm" :model="taskForm" label-width="160px">
        <el-form-item v-if="checkSendUser" prop="targetKey" style="max-height: 300px; overflow-y: scroll;">
          <el-row :gutter="20">
            <el-col :span="12" :xs="24">
              <h6>待选人员</h6>
              <el-table ref="singleTable" :data="userDataList" border style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="center"  />
                <el-table-column label="用户名" align="center" prop="realname" />
                <el-table-column label="部门" align="center" prop="orgCodeTxt" />
              </el-table>
            </el-col>
            <el-col :span="8" :xs="24">
              <h6>已选人员</h6>
              <el-tag v-for="(tag,index) in userData" :key="index" closable @close="handleClose(tag)">
                {{tag.realname}} {{tag.orgCodeTxt}}
              </el-tag>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
          <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见" />
        </el-form-item>
        <el-form-item label="附件"  prop="commentFileDto.fileurl">
          <j-upload v-model="taskForm.commentFileDto.fileurl"   ></j-upload>
        </el-form-item>
        <el-form-item label="选择抄送人" prop="ccUsers">
          <j-select-user-by-dep v-model="taskForm.ccUsers" />
        </el-form-item>
        <el-form-item label="选择下一审批人" prop="nextUsers">
          <j-select-user-by-dep v-model="taskForm.nextUsers" />
          <el-tag type="danger">注意: 多实例目前仅支持选择下一个审批人数要与原先设置的人数一致</el-tag>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="completeOpen = false">取 消</el-button>
        <el-button type="primary" @click="taskComplete(true)">同 意</el-button>
        <el-button type="primary" :disabled="!bapproved" @click="taskComplete(false)">拒 绝</el-button>
      </span>
    </a-modal>

    <!--退回流程-->
    <el-dialog :z-index="100" :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
      <el-form ref="taskForm" :model="taskForm" label-width="80px">
        <el-form-item label="退回节点" prop="targetKey">
          <el-radio-group v-model="taskForm.targetKey">
            <el-radio-button v-for="item in returnTaskList" :key="item.id" :label="item.id">{{item.name}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="退回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
          <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="returnOpen = false">取 消</el-button>
        <el-button type="primary" @click="taskReturn">确 定</el-button>
      </span>
    </el-dialog>

    <!--驳回流程-->
    <el-dialog :z-index="100" :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body>
      <el-form ref="taskForm" :model="taskForm" label-width="80px">
        <el-form-item label="驳回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
          <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectOpen = false">取 消</el-button>
        <el-button type="primary" @click="taskReject">确 定</el-button>
      </span>
    </el-dialog>
    
    <!--加签流程-->
    <a-modal :z-index="100" :title="addSignTitle" @cancel="addSignOpen = false" :visible.sync="addSignOpen" :width="'40%'" append-to-body>
      <el-form ref="addSignForm" :model="addSignForm" label-width="160px">
        <el-form-item label="加签类型" prop="addSignType" :rules="[{ required: true, message: '请选择加签类型', trigger: 'blur' }]">
          <el-radio-group v-model="addSignForm.addSignType" @change="changeAddSignType">
              <el-radio :label="0">前加签</el-radio>
              <el-radio :label="1">后加签</el-radio>
              <el-radio :label="2">多实例加签</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="用户选择" prop="addSignUsers" :rules="[{ required: true, message: '请选择用户', trigger: 'blur' }]">
          <j-select-user-by-dep v-model="addSignForm.addSignUsers" />
        </el-form-item>
        <el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
          <el-input type="textarea" v-model="addSignForm.comment" placeholder="请输入处理意见" />
        </el-form-item>
        <el-form-item label="附件"  prop="commentFileDto.fileurl">
          <j-upload v-model="addSignForm.commentFileDto.fileurl"   ></j-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addSignOpen = false">取 消</el-button>
        <el-button type="primary" @click="addSignComplete(true)">确 定</el-button>
      </span>
    </a-modal>
    
    <!--跳转流程-->
    <a-modal :z-index="100" :title="jumpTitle" @cancel="jumpOpen = false" :visible.sync="jumpOpen" :width="'40%'" append-to-body>
      <el-form ref="jumpForm" :model="jumpForm" label-width="160px">
        <el-form-item label="跳转节点" prop="jumpType" :rules="[{ required: true, message: '请选择跳转节点', trigger: 'blur' }]">
          <a-table
            size="middle"
            :columns="jumpNodeColumns"
            :loading="jumpNodeLoading"
            :pagination="false"
            :dataSource="jumpNodeData"
            :rowKey="(record) => record.id"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,type:'radio' }"
          />
        </el-form-item>
        
        <el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
          <el-input type="textarea" v-model="jumpForm.comment" placeholder="请输入处理意见" />
        </el-form-item>
        <el-form-item label="附件"  prop="commentFileDto.fileurl">
          <j-upload v-model="jumpForm.commentFileDto.fileurl"   ></j-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="jumpOpen = false">取 消</el-button>
        <el-button type="primary" @click="jumpComplete(true)">确 定</el-button>
      </span>
    </a-modal>
    <!-- 委派 转办 选择人员 -->
    <a-modal
      title="选择委派或转办人员" width="900px" :maskClosable="false"
      :confirmLoading="confirmLoading"
      :visible="delegateassign"
      :footer="null"
      @cancel="closeNode"
    >   
      <a-form :form="selUserForm" v-if="delegateassign">
        <a-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
          <el-input type="textarea" v-model="ADTaskForm.comment" placeholder="请输入处理意见" />
        </a-form-item>
        <a-form-item label="请选择委派或转办人员" v-show="true">
          <a-checkbox-group @change="spryType" v-model="spryTypes" >
              <!-- 1用户 5 部门负责人 4发起人的部门负责人-->
          
            <a-checkbox value="1"> 直接选择人员 </a-checkbox>
            <a-checkbox value="5"> 部门负责人 </a-checkbox>
            <a-checkbox value="4">
              发起人的部门负责人
              <a-tooltip placement="topLeft" title="自动获取发起人所在部门的负责人，即其上级领导。（如果其本身就是部门负责人，则指向发起人自己。）">
                <a-icon type="exclamation-circle" />
              </a-tooltip>
            </a-checkbox>
      
          </a-checkbox-group>
        </a-form-item>
        <!--            1用户  4发起人的部门负责人-->
       
        <a-form-item label="选择人员" v-if="spryTypes.indexOf('1')>-1" >
          <!--  通过部门选择用户控件 -->
          <j-select-user-by-dep v-model="spry.userIds" :multi="false"></j-select-user-by-dep>
        </a-form-item>
        
        <a-form-item label="选择部门负责人" v-if="spryTypes.indexOf('5')>-1" >
          <j-select-depart v-model="spry.departmentManageIds" :multi="false"></j-select-depart>
        </a-form-item>
        <!--btn-->
        <a-form-item >
          <a-button @click="sprySubmit" type="primary" html-type="submit" :disabled="userNode.type==0||userNode.type==2||confirmLoading">
            提交
          </a-button>
      
          <a-button @click="closeNode" style="margin-left: 10px">
            关闭
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>  
  </div>
</template>

<script>
  import {
    flowRecord
  } from "@/views/flowable/api/finished";
  import Parser from '@/components/parser/Parser'
  import {
    definitionStartByDefId,
    definitionStartByOnlineDataId,
    getProcessVariables,
    readXml,
    getFlowViewer
  } from "@/views/flowable/api/definition";
  import {
    complete,
    rejectTask,
    returnList,
    returnTask,
    getNextFlowNode,
    delegateTask,
    assignTask,
    nextApprovedEG,
    addSignTask,
    multiInstanceAddSignTask,
    userTaskList,
    jumpTask,
  } from "@/views/flowable/api/todo";
  import {
    queryMyDepartTreeList
  } from "@/api/api";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    getUserList
  } from "@/api/api"
  import bpmnModeler from "workflow-bpmn-modeler-jeecgboot";
  import DeptUserInfo from '@/views/system/modules/DeptUserInfo'
  import {
    flowableMixin
  } from '@/views/flowable/mixins/flowableMixin'

  import { getCustomForm, getOnlineForm, saveOnlineFormData, getOnlineFormData, getOnlineFormItem  } from "@/api/form";
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  //for formdesigner
  import formBuilder from '@/components/formdesigner/components/formBuilder'
  import formViewer from '@/components/formdesigner/components/formViewer'
  //online表单显示组件
  import { handongRule } from '@comp/formdesigner/hanDongYuZhou/handongCommon'
  import hanDongInput from "@comp/formdesigner/hanDongYuZhou/hanDongInput";
  import hanDongPassword from "@comp/formdesigner/hanDongYuZhou/hanDongPassword";
  import hanDongSwitch from "@comp/formdesigner/hanDongYuZhou/hanDongSwitch";
  import hanDongList from "@comp/formdesigner/hanDongYuZhou/hanDongList";
  import hanDongRadio from "@comp/formdesigner/hanDongYuZhou/hanDongRadio";
  import hanDongCheckbox from "@comp/formdesigner/hanDongYuZhou/hanDongCheckbox";
  import hanDongListMulti from "@comp/formdesigner/hanDongYuZhou/hanDongListMulti";
  import hanDongSelSearch from "@comp/formdesigner/hanDongYuZhou/hanDongSelSearch";
  import hanDongTextArea from "@comp/formdesigner/hanDongYuZhou/hanDongTextArea";
  import hanDongDate from "@comp/formdesigner/hanDongYuZhou/hanDongDate";
  import hanDongDateTime from "@comp/formdesigner/hanDongYuZhou/hanDongDateTime";
  import hanDongTime from "@comp/formdesigner/hanDongYuZhou/hanDongTime";
  import hanDongImage from "@comp/formdesigner/hanDongYuZhou/hanDongImage";
  import hanDongFile from "@comp/formdesigner/hanDongYuZhou/hanDongFile";
  import hanDongUmeditor from "@comp/formdesigner/hanDongYuZhou/hanDongUmeditor";
  import hanDongSelUser from "@comp/formdesigner/hanDongYuZhou/hanDongSelUser";
  import hanDongSelDepart from "@comp/formdesigner/hanDongYuZhou/hanDongSelDepart";
  import hanDongMarkDown from "@comp/formdesigner/hanDongYuZhou/hanDongMarkDown";
  import hanDongPca from "@comp/formdesigner/hanDongYuZhou/hanDongPca";
  import hanDongPopup from "@comp/formdesigner/hanDongYuZhou/hanDongPopup";
  import hanDongSelTree from "@comp/formdesigner/hanDongYuZhou/hanDongSelTree";
  import hanDongCatTree from "@comp/formdesigner/hanDongYuZhou/hanDongCatTree";
  import hanDongLinkDown from "@comp/formdesigner/hanDongYuZhou/hanDongLinkDown";
  
  export default {
    name: "Record",
    mixins: [flowableMixin],
    components: {
      Parser,
      bpmnModeler,
      DeptUserInfo,
      formBuilder,
      formViewer,
      //online
      hanDongInput,
      hanDongPassword,
      hanDongSwitch,
      hanDongList,
      hanDongRadio,
      hanDongCheckbox,
      hanDongListMulti,
      hanDongSelSearch,
      hanDongTextArea,
      hanDongDate,
      hanDongDateTime,
      hanDongTime,
      hanDongImage,
      hanDongFile,
      hanDongUmeditor,
      hanDongSelUser,
      hanDongSelDepart,
      hanDongMarkDown,
      hanDongPca,
      hanDongPopup,
      hanDongSelTree,
      hanDongCatTree,
      hanDongLinkDown,
    },
    props: {},
    data() {
      return {
        // 模型xml数据
        xmlData: "",
        xmlShow: true,
        xmlView: true,
        users: [],
        groups: [],
        categorys: [],
        taskList: [],
        iExpandedKeys: [],
        checkedKeys: [],
        selectedKeys: [],
        departTree: [],
        treeData: [],
        userIdentity: "",
        autoExpandParent: true,
        // 部门名称
        deptName: undefined,
        // 部门树选项
        deptOptions: undefined,
        // 用户表格数据
        userList: null,
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 查询参数
        queryParams: {
          deptId: undefined
        },
        // 遮罩层
        loading: true,
        flowRecordList: [], // 流程流转数据
        flowNodeInfo: [],// 流程定义节点信息
        formConfCopy: {},
        src: null,
        rules: {}, // 表单校验
        variablesForm: {}, // 流程变量数据
        taskForm: {
          returnTaskShow: false, // 是否展示回退表单
          delegateTaskShow: false, // 是否展示委派表单
          defaultTaskShow: true, // 默认处理
          sendUserShow: false, // 审批用户
          multiple: false,
          comment: "", // 意见内容
          commentFileDto: { //意见里的附件
            type: '',
            fileurl: ''
          }, 
          procInsId: "", // 流程实例编号
          instanceId: "", // 流程实例编号
          deployId: "", // 流程定义编号
          taskId: "", // 流程任务编号
          procDefId: "", // 流程编号
          businessKey: "", //业务主键编号
          dataId: "",//业务主键编号
          nodeType: "", //当前节点类型 目前只针对多实例会签做处理
          vars: "",
          targetKey: "",
          category: "",//流程类别，目前主要区别online与自定义使用
          onlineId: "",//online表单Id
          onlineDataId: "",//online数据Id
        },
        userDataList: [], // 流程候选人
        assignee: null,
        formConf: {}, // 默认表单数据
        formConfOpen: false, // 是否加载默认表单数据
        customForm: { //自定义表单
          formId: '',
          title: '',
          disabled: false,
          visible: false,
          formComponent: null,
          model: {},
          /*流程数据*/
          customFormData: {},
          isNew: false,
          disableSubmit: true
        },
        onlineForm: { //online提交表单
          formId: '',
          title: '',
          disabled: false,
          visible: false,
          formComponent: null,
          model: {},
          /*流程数据*/
          onlineFormData: {},
          isNew: false,
          disableSubmit: true
        },
        onlineFormItem: {// online FormItem数据,作为主从表生成来源
          formData: [],
          subTable: [],
          tableForm: {
            tableName: [],
            columns: [],
          },
          dataSource:[],
        }, 
        saveOnlineFormData: { //提交online表单数据
          dataList: {},
        }, 
        onlineViewForm: { //online显示表单
          formId: '',
          title: '',
          disabled: false,
          visible: false,
          formComponent: null,
          model: {},
          /*流程数据*/
          onlineFormData: {},
          isNew: false,
          disableSubmit: true
        },       
        formCode:'',
        formVal:'',
        formViewOpen: false,  //是否显示formdesigner的输入后提交的表单
        formViewData: '',    //显示formdesigner的输入后提交的表单数据
        variables: [], // 流程变量数据
        variablesData: {}, // 流程变量数据
        variableOpen: false, // 是否加载流程变量数据
        fileDisplay: false, // 是否显示上传的文件控件
        fileList: [], //表单设计器上传的文件列表
        returnTaskList: [], // 回退列表数据
        finished: 'false',
        completeTitle: null,
        completeOpen: false,
        returnTitle: null,
        returnOpen: false,
        rejectOpen: false,
        rejectTitle: null,
        userData: [],     //选中用户
        checkSendUser: false ,// 是否展示选择人员模块,
        taskFormOpen: false, //formDesigner任务表单
        taskFormData: '',//流程任务录入表单
        taskFormVal: [], //流程任务显示表单数据填充值
        taskFormList: [], // 流程任务变量数据列表
        taskFormViewOpen: false, //任务表单
        startUserForm : {  
          isStartUserNode: false, //第一个用户任务发起节点
          editFormType: '', //第一发起人节点编辑的表单类型
        },
        bapproved: false,  //获取下个节点是否通用同意拒绝网关，以便显示拒绝按钮
        addSignOpen: false, //前加签
        addSignTitle: null,  //加签标题
        addSignForm: {
          multiple: true,
          comment: "", // 意见内容
          commentFileDto: { //意见里的附件
            type: '',
            fileurl: ''
          }, 
          procInsId: "", // 流程实例编号
          instanceId: "", // 流程实例编号
          deployId: "", // 流程定义编号
          taskId: "", // 流程任务编号
          procDefId: "", // 流程编号
          businessKey: "", //业务主键编号
          dataId: "",//业务主键编号
          nodeType: "", //当前节点类型 目前只针对多实例会签做处理
          vars: "",
          targetKey: "",
          category: "",//流程类别，目前主要区别online与自定义使用
          onlineId: "",//online表单Id
          onlineDataId: "",//online数据Id
          addSignUsers: "", //委托加签人员
          addSignType: 0, //加签类型
        },
        
        jumpOpen: false, //跳转
        jumpTitle: null,  //跳转标题
        jumpForm: {
          multiple: true,
          comment: "", // 意见内容
          commentFileDto: { //意见里的附件
            type: '',
            fileurl: ''
          }, 
          procInsId: "", // 流程实例编号
          instanceId: "", // 流程实例编号
          deployId: "", // 流程定义编号
          taskId: "", // 流程任务编号
          procDefId: "", // 流程编号
          businessKey: "", //业务主键编号
          dataId: "",//业务主键编号
          nodeType: "", //当前节点类型 目前只针对多实例会签做处理
          vars: "",
          targetKey: "",
          category: "",//流程类别，目前主要区别online与自定义使用
          onlineId: "",//online表单Id
          onlineDataId: "",//online数据Id
          jumpNode: "", //跳转节点
        },
        jumpNodeLoading: false,
        jumpNodeData: [],
        jumpNodeColumns: [
          {
            title: '节点名称',
            dataIndex: 'name'
          }
        ],
        selectedRowKeys: [],
        selectedRows: [],
        //转办委派变量
        ADTaskForm: {
          taskId: '',
          instanceId: '',
          assignee: '',
          dataId: '',
          category: '',
          comment:'',
        },
        delegateassign: false,
        confirmLoading: false,
        daassignee: '',
        adcurrent: 0,
        adType: '',
        selUserForm: this.$form.createForm(this),
        userNode:{},
        spryTypes:[],
        spry:{
          //选中的用户
          userIds:'',
          departmentManageIds:'',
          chooseSponsor:false,
          chooseDepHeader:false,
        },       
          
      };
    }, 
    created() {
      this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
      this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
      this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
      this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
      // 初始化表单
      this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId;
      this.taskForm.businessKey = this.$route.query && this.$route.query.businessKey;
      this.taskForm.category = this.$route.query && this.$route.query.category;
      this.taskForm.dataId = this.$route.query && this.$route.query.businessKey;
      //节点类型
      this.taskForm.nodeType = this.$route.query && this.$route.query.nodeType;
      //online表单id和数据id
      this.taskForm.onlineId = this.$route.query && this.$route.query.onlineId;
      if (this.taskForm.category === 'online') {
        this.taskForm.onlineDataId = this.$route.query && this.$route.query.businessKey;
      }

      // 回显流程记录
      //
      console.log("created this.taskForm.taskId=",this.taskForm.taskId);
      console.log("created this.taskForm.deployId=",this.taskForm.deployId);
      this.getModelDetail(this.taskForm.deployId);
      // 流程任务重获取变量表单
      if (this.taskForm.taskId) {
        this.processVariables(this.taskForm.taskId)
        this.getNextApprovedEG(this.taskForm.taskId)
        //this.getNextFlowNode(this.taskForm.taskId)
        console.log("userDataList=", this.userDataList)
      }
      this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId, this.taskForm.businessKey, this.taskForm.taskId, this.taskForm.category);
      this.finished = this.$route.query && this.$route.query.finished
      console.log("this.finished",this.finished)

    },
    mounted() {
      //表单数据回填，模拟异步请求场景
      setTimeout(() => {
        // 回填数据,这里主要是处理文件列表显示,临时解决，以后应该在form设计器完成
        if (this.variablesData.hasOwnProperty('list')) {
          this.fillFormData(this.variablesData.list, this.variablesData)
          // 更新表单
          this.key = +new Date().getTime()
        }
      }, 1000)
    },
    methods: {
      /** 查询部门下拉树结构 */
      getTreeselect() {
        var that = this
        that.treeData = []
        that.departTree = []
        queryMyDepartTreeList().then((res) => {
          if (res.success && res.result) {
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.treeData.push(temp)
              that.departTree.push(temp)
              that.setThisExpandedKeys(temp)
              // console.log(temp.id)
            }
            this.loading = false
          }
          that.userIdentity = res.message
        });
      },
      clearSelectedDepartKeys() {
        this.checkedKeys = [];
        this.selectedKeys = [];
        this.currentDeptId = '';
        this.$refs.DeptUserInfo.currentDeptId = '';
      },
      setThisExpandedKeys(node) {
        //只展开一级目录
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)
          //下方代码放开注释则默认展开所有节点
          /**
          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
          */
        }
      },
      /** 查询用户列表 */
      getList() {
        getUserList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.deptId = data.id;
        this.getList();
      },
      /** xml 文件 */
      getModelDetail(deployId) {
        // 发送请求，获取xml
        readXml(deployId).then(res => {
          this.xmlData = res.result
          this.getFlowViewer(this.taskForm.procInsId);
        })
      },
      getFlowViewer(procInsId) {
        getFlowViewer(procInsId).then(res => {
          this.taskList = res.result || [];
          console.log("taskList=", this.taskList);
          this.fillColor();
        })
      },
      setIcon(val) {
        if (val) {
          return "el-icon-check";
        } else {
          return "el-icon-time";
        }
      },
      setColor(val) {
        if (val) {
          return "#2bc418";
        } else {
          return "#b3bdbb";
        }
      },
      fillColor() {
        const modeler = this.$refs.refNode.modeler;
        const canvas = modeler.get('canvas')
        console.log("fillColor modeler=",modeler)
        modeler._definitions.rootElements[0].flowElements.forEach(n => {
          const completeTask = this.taskList.filter(m => m.key === n.id)
          const todoTask = this.taskList.find(m => !m.completed)
          const endTask = this.taskList[this.taskList.length - 1]
          if (n.$type === 'bpmn:UserTask') {
            if (completeTask) {
              if(completeTask.length >0) {
                canvas.addMarker(n.id, completeTask[completeTask.length-1].completed ? 'highlight' : 'highlight-todo')
              }
              else {
                canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              }
              
              n.outgoing?.forEach(nn => {
                const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
                  if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                    canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                  } else {
                    canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  }
                }
              })
            }
          }
          // 排他网关
          else if (n.$type === 'bpmn:ExclusiveGateway') {
            if (completeTask) {
              if(completeTask.length >0) {
                canvas.addMarker(n.id, completeTask[completeTask.length-1].completed ? 'highlight' : 'highlight-todo')
              }
              else {
                canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              }
              n.outgoing?.forEach(nn => {
                const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
                if (targetTask) {

                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }

              })
            }

          }
          // 并行网关
          else if (n.$type === 'bpmn:ParallelGateway') {
            if (completeTask) {
              if(completeTask.length >0) {
                canvas.addMarker(n.id, completeTask[completeTask.length-1].completed ? 'highlight' : 'highlight-todo')
              }
              else {
                canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              }
              n.outgoing?.forEach(nn => {
                debugger
                const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
              })
            }
          } else if (n.$type === 'bpmn:StartEvent') {
            console.log("n.outgoing=",n.outgoing)
            n.outgoing?.forEach(nn => {
              const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
              if (completeTask) {
                canvas.addMarker(nn.id, 'highlight')
                canvas.addMarker(n.id, 'highlight')
                return
              }
            })
          } else if (n.$type === 'bpmn:EndEvent') {
            //console.log("endTask=",endTask)
            if (endTask?.key === n.id && endTask?.completed) {
              canvas.addMarker(n.id, 'highlight')
              return
            }
          }
        })
      },
      // 单选框选中下一个流程人员
      handleSelectionChange(selection) {
        this.userData = selection
        const val = selection.map(item => item.username);
        console.log("val=", val);
        if (val instanceof Array) {
          this.taskForm.values = {
            "approval": val.join(',')
          }
        } else {
          this.taskForm.values = {
            "approval": val,
          }
        }
        console.log("this.taskForm.values=", this.taskForm.values);
      },
      clearSelectedDepartKeys() {
        this.checkedKeys = [];
        this.selectedKeys = [];
        this.currentDeptId = '';
        this.$refs.DeptUserInfo.currentDeptId = '';
      },
      onExpand(expandedKeys) {
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onSelect(selectedKeys, e) {
        if (this.selectedKeys[0] !== selectedKeys[0]) {
          this.selectedKeys = [selectedKeys[0]];
        }
        let record = e.node.dataRef;
        this.checkedKeys.push(record.id);
        this.$refs.DeptUserInfo.onClearSelected();
        this.$refs.DeptUserInfo.open(record);
      },
      // 关闭标签
      handleClose(tag) {
        this.userData.splice(this.userData.indexOf(tag), 1);
        this.$refs.singleTable.toggleRowSelection(tag, false)
      },
      /** 流程变量赋值 */
      handleCheckChange(selection) {
       const val = selection.map(item => item.username);
       this.taskForm.values = {approval:val};
       console.log("this.taskForm.values=",this.taskForm.values);
      },
      /** 流程流转记录 */
      getFlowRecordList(procInsId, deployId, businessKey, taskId, category) {
        console.log("procInsId=, deployId=, businessKey=, taskId=， category=", procInsId, deployId, businessKey, taskId, category);
        const params = {
          procInsId: procInsId,
          deployId: deployId,
          businessKey: businessKey,
          taskId: taskId,
          category: category
        }
        console.log("this.taskForm.onlineId=",this.taskForm.onlineId);
        console.log("this.taskForm.category=",this.taskForm.category);
        console.log("this.taskForm.onlineDataId=",this.taskForm.onlineDataId);
        if (this.taskForm.category === 'online' && this.taskForm.onlineDataId === undefined) {//online申请提交
           this.onlineForm.formId = this.$route.query && this.$route.query.onlineId;
            getOnlineForm(this.onlineForm.formId).then(res => {
            console.log("getOnlineForm res=",res);
            this.onlineForm.onlineFormData = res.result.formData;
            this.onlineForm.disabled = false;
            this.onlineForm.isNew = true;
            this.onlineForm.visible = true;
            console.log("onlineForm.onlineFormData=",this.onlineForm.onlineFormData);
            getOnlineFormItem(formId).then(itemres => {//获取从表相关信息
              if (itemres.success) {
                console.log("getOnlineFormItem itemres=",itemres)
                this.onlineFormItem.formData = itemres.result
                var subTable = itemres.result.head.subTableStr
                this.onlineFormItem.subTable = subTable.split(",")
                console.log("this.onlineFormItem.subTable=",this.onlineFormItem.subTable)
                for (var i=0;i<this.onlineFormItem.subTable.length;i++) {
                  var tablename = this.onlineFormItem.subTable[i]
                  if(this.onlineFormItem.formData.schema.properties.hasOwnProperty(tablename)) {
                    this.onlineFormItem.tableForm.tableName[i] = tablename
                    this.onlineFormItem.tableForm.columns[i] = this.onlineFormItem.formData.schema.properties[tablename].columns
                  }
                }
                console.log("this.onlineFormItem.tableForm=",this.onlineFormItem.tableForm)
                this.onlineForm.visible  = true;
              }
              else {
                this.$message.error(itemres.message);
              }  
            })
          })    
        }
        else if (businessKey == 'newkey') {
           this.customForm.formId = this.$route.query && this.$route.query.formId;
            getCustomForm(this.customForm.formId).then(res => {
            console.log("newkey res=",res);
            this.customForm.disabled = false;
            this.customForm.isNew = true;
            this.customForm.visible = true;
            this.customForm.disableSubmit = false;
            this.customForm.formComponent = this.getFormComponent(res.result.routeName).component;
            //this.formConfOpen = true;
          })  
         
           
        } else {
          flowRecord(params).then(res => {
            console.log("res", res);
            if (res.success) {
              this.flowRecordList = res.result.flowList;
              this.flowNodeInfo = res.result.flowNodeInfo;
              console.log("this.flowRecordList", this.flowRecordList);
              if (res.result.hasOwnProperty('flowList')) {
                this.flowRecordList.forEach((item, index) => {
                  if (item.activityType === 'startEvent' || item.activityType === 'endEvent' ){
                    return;
                  }
                  this.taskFormList[index] = JSON.stringify(item.taskFormValues);
                  //对下个节点是会签同时可以选择用户的做特殊处理taskformvalues
                  if(item.taskFormValues.formValue.hasOwnProperty('taskformvalues')) {
                    this.taskFormVal[index] = JSON.stringify(item.taskFormValues.formValue.taskformvalues);
                  }
                  else {
                    this.taskFormVal[index] = JSON.stringify(item.taskFormValues.formValue);
                  }
                  //console.log("index,",index);
                  //console.log("item=",item);
                });
                //倒序显示,跟流程记录刚好相反
                this.taskFormList.reverse();
                this.taskFormVal.reverse();
                this.taskFormViewOpen = true;
                console.log("this.taskFormList=",this.taskFormList);
                console.log("this.taskFormVal=",this.taskFormVal);
              } 
              //判断是否是开始后的第一个用户任务节点，是就放开表单编辑功能 
              if (res.result.hasOwnProperty('isStartUserNode') && res.result.isStartUserNode) {
                if(this.taskForm.category === 'online') {
                  this.startUserForm.editFormType = 'online';
                }
                else if (this.taskForm.category === 'zdyyw') {
                  this.startUserForm.editFormType = 'zdyyw';
                }
                else {
                  this.startUserForm.editFormType = 'oa';
                }
                this.startUserForm.isStartUserNode = true;
              }
              //流程过程中有online表单数据，获取online表单配置与数据
              if (res.result.hasOwnProperty('onlineConfig')) {
                this.onlineViewForm.onlineFormData = res.result.onlineConfig;
                console.log("onlineViewForm.onlineFormData=",this.onlineViewForm.onlineFormData);
                console.log("this.taskForm=",this.taskForm)
                var sonlineId = res.result.onlineId
                getOnlineFormData(sonlineId,this.taskForm.onlineDataId).then(res => {
                  console.log("getOnlineFormData res=",res);
                  if (res.success) {
                    this.onlineViewForm.model = res.result;
                    console.log("onlineViewForm.model=",this.onlineViewForm.model);
                    getOnlineFormItem(sonlineId).then(itemres => {//获取从表相关信息
                      if (itemres.success) {
                        console.log("getOnlineFormItem itemres=",itemres)
                        this.onlineFormItem.formData = itemres.result
                        if(itemres.result.head.subTableStr != null) {
                          var subTable = itemres.result.head.subTableStr
                          this.onlineFormItem.subTable = subTable.split(",")
                          console.log("this.onlineFormItem.subTable=",this.onlineFormItem.subTable)
                          for (var i=0;i<this.onlineFormItem.subTable.length;i++) {
                            var tablename = this.onlineFormItem.subTable[i]
                            if(this.onlineFormItem.formData.schema.properties.hasOwnProperty(tablename)) {
                              this.onlineFormItem.tableForm.tableName[i] = tablename
                              this.onlineFormItem.tableForm.columns[i] = this.onlineFormItem.formData.schema.properties[tablename].columns
                              this.onlineFormItem.dataSource[i] = this.onlineViewForm.model[tablename]
                            }
                          }
                          console.log("this.onlineFormItem.tableForm=",this.onlineFormItem.tableForm)
                          console.log("this.onlineFormItem.dataSource=",this.onlineFormItem.dataSource)
                        }
                        if(this.startUserForm.isStartUserNode) {
                          this.onlineViewForm.disabled = false;
                        }
                        else {
                          this.onlineViewForm.disabled = true;
                        }  
                        this.onlineViewForm.isNew = false;
                        this.onlineViewForm.visible = true;
                      }
                      else {
                        this.$message.error(itemres.message);
                      }  
                    })
                  }
                  
                })    
              }  
              // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
              else if (res.result.hasOwnProperty('formData')) {
                //console.log("flowRecord res.result.formData", res.result.formData);
                this.formConf = res.result.formData;
                //console.log("flowRecord this.formConf", this.formConf);
                this.formCode = JSON.stringify(res.result.formData);
                //console.log("flowRecord this.formCode", this.formCode); 
                if(res.result.hasOwnProperty('routeName')) {
                  if(this.startUserForm.isStartUserNode) {
                    this.customForm.disabled = false;
                  }
                  else {
                    this.customForm.disabled = true;
                  }
                  this.customForm.visible = true;
                  this.customForm.formComponent = this.getFormComponent(res.result.routeName).component;
                  this.customForm.model = res.result.formData;
                  this.customForm.customFormData = res.result.formData;
                }
                console.log("this.customForm=", this.customForm);
                console.log("model=", this.customForm.model);
                if(res.result.formData.hasOwnProperty('config')) {
                  this.formConfOpen = true;
                }
                else {
                  this.formConfOpen = false;
                }
              }
              else if (res.result.hasOwnProperty('taskFormData')) {
                //console.log("flowRecord res.result.taskFormData", res.result.taskFormData);
                this.taskFormData = JSON.stringify(res.result.taskFormData);
                //console.log("flowRecord this.taskFormData", this.taskFormData);
                this.taskFormOpen = true;
              }  
            
            } else {
              this.$message.error(res.message);
              return;
            }

          }).catch(res => {
            this.$message.error("出现异常");
            this.goBack();
          })
        } 

      },
      /** 获取流程变量内容 */
      processVariables(taskId) {
        if (taskId) {
          // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
          getProcessVariables(taskId).then(res => {
            console.log("getProcessVariables res=",res);
             this.variables = res.result.variables;
            if(res.success) {
              if(res.result.hasOwnProperty('variables')) {
                this.variablesData = res.result.variables;
                console.log("this.variablesData=",this.variablesData)
                this.variableOpen = true;
                this.formViewData = JSON.stringify(this.variablesData);
                this.formVal = JSON.stringify(this.variablesData.formValue);
                this.taskForm.values = JSON.parse(this.formVal);
                console.log("this.taskForm.values=",this.taskForm.values);
              }
              this.getNextFlowNode(this.taskForm.taskId);
            }
            else {
              this.$message.error(res.message);
            }
           
          });
        }
      },
      //点击文件列表中已上传文件进行下载
      handleFilePreview(file) {
        var a = document.createElement('a');
        var event = new MouseEvent('click');
        a.download = file.name;
        a.href = file.url;
        a.dispatchEvent(event);
        console.log(file)
      },
      fillFormData(list, formConf) { // for formdesigner 
        console.log("fillFormData list=",list);
        console.log("fillFormData formConf=",formConf);
        list.forEach((item, i) => {
          // 特殊处理el-upload，包括 回显图片
          if(formConf.formValue[item.id] != '') {
            const val = formConf.formValue[item.id];
            if (item.ele === 'el-upload') {
              console.log('fillFormData val=',val)
              if(item['list-type'] != 'text') {//图片
                this.fileList = []    //隐藏加的el-upload文件列表
                //item['file-list'] = JSON.parse(val)
                if(val != '') {
                  item['file-list'] = JSON.parse(val)
                }
              }
              else {  //列表
                console.log("列表fillFormData val",val)
                this.fileList = JSON.parse(val)
                item['file-list'] = [] //隐藏加的表单设计器的文件列表
              }
              // 回显图片
              this.fileDisplay = true
            }
          }
          
          if (Array.isArray(item.columns)) {
            this.fillFormData(item.columns, formConf)
          }
        })
      },
      /** 根据当前任务或者流程设计配置的下一步节点 */
      getNextFlowNode(taskId) {
        // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
        let nextValues = this.taskForm.values;
        const params = {
          taskId: taskId,
          values: nextValues
        }
        getNextFlowNode(params).then(res => {
          const data = res.result;
          console.log("getNextFlowNode data=",data)
          if (data) {
            this.checkSendUser = true
            if (data.type === 'assignee') { // 指定人员
              this.userDataList = res.result.userList;
              this.checkSendUser = false;
            } else if (data.type === 'candidateUsers') { // 指定人员(多个)
              this.userDataList = res.result.userList;
              //console.log("candidateUsers nodeType,bmutiInstanceFinish=",this.taskForm.nodeType,this.taskForm.bmutiInstanceFinish) 
              if(this.userDataList.length===1) {
                this.checkSendUser = false;
                this.taskForm.values = {
                  "approval": this.userDataList[0].username
                }
              }
              else if(this.userDataList.length>1) {
                 console.log("candidateUsers nodeType=",this.taskForm.nodeType) 
                 if(this.taskForm.nodeType === 'multiInstance') {
                
                   console.log("candidateUsers res.result.bmutiInstanceFinish=",res.result.bmutiInstanceFinish) 
                     if(res.result.bmutiInstanceFinish) {//根据会签条件，最后一个审批才弹出多用户选择
                       this.checkSendUser = true;
                     }
                     else {
                       this.checkSendUser = false;
                     }
                 }
              }  
              
              this.taskForm.multiple = true;
              //console.log("res.result.userList=",res.result.userList);
              //console.log("userDataList=",this.userDataList)
            } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
              res.result.roleList.forEach(role => {
                role.userId = role.roleId;
                role.realName = role.roleName;
              })
              this.userDataList = res.result.roleList;
              this.taskForm.multiple = false;
            } else if (data.type === 'multiInstance') { // 会签，不让用户选择，固定流程设置的人员
              this.userDataList = res.result.userList;
              this.userData = this.userDataList;
              this.taskForm.multiple = true;
              this.checkSendUser = false;
            } else if (data.type === 'fixed') { // 已经固定人员接收下一任务
              this.checkSendUser = false;
            }
            //console.log("checkSendUser,userDataList=",this.checkSendUser,this.userDataList)
          }
        })
      },
      //获取下一个通用拒绝同意排它网关
      getNextApprovedEG(taskId) {
        nextApprovedEG({taskId: taskId}).then(res => {
          if(res.success) {
            const data = res.result;
            console.log("getNextApprovedEG",data)
            this.bapproved = data;
          }
         
          
        });  
      },      
      /** 审批任务选择 */
      handleComplete() {
        const taskFormRef = this.$refs.taskFormBuilder;
        console.log("taskFormRef=",taskFormRef);
        const isExistTaskForm = taskFormRef !== undefined;
        
        // 若无任务表单，则 taskFormPromise 为 true，即不需要校验
        const taskFormPromise = !isExistTaskForm ? true : new Promise((resolve, reject) => {
          taskFormRef.$refs[taskFormRef.formConf.formModel].validate(valid => {
            valid ? resolve() : reject()
          })
        });
        Promise.all([taskFormPromise]).then(() => {//校验通过
          this.completeOpen = true;
          this.completeTitle = "审批流程";
          this.getTreeselect();
        })  
      },
      /** 审批任务 */
      taskComplete(approved) {
        if(this.taskForm.hasOwnProperty("values")) {
          if ((!this.taskForm.values.hasOwnProperty("approval") || (this.taskForm.values.hasOwnProperty("approval") && this.taskForm.values.approval === "") ) && this.checkSendUser ) {
            if(!this.taskForm.hasOwnProperty("nextUsers") || (this.taskForm.hasOwnProperty("nextUsers") && this.taskForm.nextUsers === "") ) {
              this.$message.error("请选择流程接收人员或选择下一审批人");
              return;
            } 
          }
          else if( this.checkSendUser && (this.taskForm.values.hasOwnProperty("approval") && this.taskForm.values.approval.split(",").length>1)) {
            this.$message.error("目前流程只能选择一个接收人员");
            return;
          }
        }

        if (!this.taskForm.comment) {
          this.$message.error("请输入审批意见");
          return;
        }
        const taskFormRef = this.$refs.taskFormBuilder;
        const isExistTaskForm = taskFormRef !== undefined;
        if (isExistTaskForm) {//流程里的设置表单
          this.taskForm.values.taskformvalues = taskFormRef.form;
        }
        if (this.startUserForm.isStartUserNode && this.startUserForm.editFormType === 'oa' ) {
          this.$refs.refStartBuilder.validate();
          const approval = this.taskForm.values.approval;
          const variables=JSON.parse(this.formVal);
          const formData = JSON.parse(this.formViewData);
          formData.formValue = JSON.parse(this.formVal);
          variables.variables = formData;
          console.log("variables=", variables);
          this.taskForm.variables = variables;
          this.taskForm.values = variables;
          if(approval) {
            this.taskForm.values.approval = approval;
          }
        }
        if (this.startUserForm.isStartUserNode && this.startUserForm.editFormType === 'zdyyw' ) {
          //this.$message.error("目前还不支持自定义表单的编辑修改功能！！！");
          //this.$refs.refCustomForm.submitForm();
        }  
        if (this.startUserForm.isStartUserNode && this.startUserForm.editFormType === 'online' ) {
          this.$message.error("目前还不支持online表单的编辑修改功能！！！");
          //this.$refs.refViewOnlForm.submitForm();
        }  
        this.taskForm.approved = approved; //对特殊通用同意拒绝排它网关的处理
        console.log("this.taskForm=",this.taskForm);        
        complete(this.taskForm).then(response => {
          this.$message.success(response.message);
          this.goBack();
        });
      },
      spryType(types){
        /*  1用户 4发起人的部门负责人 5部门负责人*/
        // this.spryTypes = types;
        if (this.spryTypes.indexOf('1')==-1) this.spry.userIds = '';
        if (this.spryTypes.indexOf('5')==-1) this.spry.departmentManageIds = '';
        //是否选中发起人的部门领导
        this.spry.chooseDepHeader = this.spryTypes.indexOf('4')>-1 ;
      
        console.log("this.spry",this.spry)
      },
      sprySubmit() {
        var that = this;
       if (this.spryTypes.length==0){
         that.$message.error("必须选择委托或转办人员！");
         return;
       }
       if (this.spry.userIds == ''){
         that.$message.error("必须选择委托或转办人员！");
         return;
       }
        this.delegateassign = false;      
        this.daassignee = this.spry.userIds;
        console.log("this.daassignee=",this.daassignee);
        this.ADTaskForm.assignee = this.daassignee;
        if(this.adType == "1") { //委派
          that.handleDelegate();
        }
        else if(this.adType == "2") { //转办
          that.handleAssign();
        }
        else {
          that.$message.error("不认识的类型，未知的错误！");
        }
      },
      closeNode() {
        this.delegateassign = false,
        this.adcurrent=0,
        this.spryTypes=[],
        this.spry={}
      },
      //弹出选择委派人员界面
      SelectUser(type){
        this.ADTaskForm.taskId = this.taskForm.taskId;
        this.ADTaskForm.instanceId = this.taskForm.procInsId;
        this.ADTaskForm.dataId = this.taskForm.dataId;
        this.ADTaskForm.category = this.taskForm.category;
        this.adType = type;
        this.delegateassign = true ;
      },
      /** 委派任务 */
      handleDelegate() {
        delegateTask(this.ADTaskForm).then( res => {
          this.$message.success(res.message);
          this.goBack();
        });
      },
      /** 转办任务 */
      handleAssign() {
        console.log("handleAssign this.ADTaskForm",this.ADTaskForm)
        assignTask(this.ADTaskForm).then( res => {
          this.$message.success(res.message);
          this.goBack();
        });
      },
      /** 返回页面 */
      goBack() {
        // 关闭当前标签页并返回上个页面
        //this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.go(-1)
      },
      /** 接收子组件传的值 */
      getData(data) {
        if (data) {
          console.log("enter getData data=",data)
          const variables = [];
          data.fields.forEach(item => {
            let variableData = {};
            variableData.label = item.__config__.label
            // 表单值为多个选项时
            if (item.__config__.defaultValue instanceof Array) {
              const array = [];
              item.__config__.defaultValue.forEach(val => {
                array.push(val)
              })
              variableData.val = array;
            } else {
              variableData.val = item.__config__.defaultValue
            }
            variables.push(variableData)
          })
          this.variables = variables;
          console.log("this.variables=",variables)
        }
      },
      /** 申请流程表单formdesigner数据提交 nbacheng2022-09-05 */
      submitForm() {
        this.$refs.formBuilder.validate();
        if(this.formVal !='') {
          //console.log("submitForm formVal",this.formVal);
          //console.log("submitForm formCode",this.formCode);
          this.formViewOpen = true;
          this.formConfOpen = false;
          const variables=JSON.parse(this.formVal);
          const formData = JSON.parse(this.formCode);
          formData.formValue = JSON.parse(this.formVal);

          if (this.taskForm.procDefId) {
            variables.variables = formData;
            console.log("variables=", variables);
            // 启动流程并将表单数据加入流程变量
            definitionStartByDefId(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
              this.$message.success(res.message);
              this.goBack();
            })
          }
        }
      },
      //online表单提交数据信息
      submitOnlForm(){
        console.log("submitOnlForm this.onlineForm.onlineFormData",this.onlineForm.onlineFormData)
        this.saveOnlineFormData.formId = this.onlineForm.onlineFormData[0].id;
        this.saveOnlineFormData.fieldList = this.onlineForm.onlineFormData[0].fieldAll;
        let code = this.saveOnlineFormData.formId + "?" + "tabletype=1"  //正式修改成获取，目前先只支持单表
        console.log("submitOnlForm this.saveOnlineFormData",this.saveOnlineFormData)
        saveOnlineFormData(this.saveOnlineFormData.dataList,code).then(res => {
          console.log("saveOnlineFormData res=",res);
          if(res.success) {
            this.$message.success(res.message);
            var params = Object.assign({
                dataId: res.result
            }, this.variables);
            //variables.variables = formData;
            console.log("variables=", this.variables);
            // 启动流程并将表单数据加入流程变量
            definitionStartByOnlineDataId(res.result, this.saveOnlineFormData.formId, this.taskForm.deployId, params).then(res => {
              console.log("definitionStartByOnlineDataId res=",res);
              this.$message.success(res.message);
              this.onlineForm.isNew = false;
              this.goBack();
            })
          }
        })
      },
      commonComponent(zcf){
       console.log("commonComponent zcf=",zcf);
       console.log("this.saveOnlineFormData.dataList=",this.saveOnlineFormData.dataList)
        for(var i = 0;i<this.onlineForm.onlineFormData.length;i++){
          if(this.onlineForm.onlineFormData[i].id == zcf.cgformHeadId){
            var flagInfo =0;
            let fieldname = zcf.dbFieldName
            this.saveOnlineFormData.dataList[fieldname] = zcf.commonDataInfo
            console.log("this.saveOnlineFormData.dataList[fieldname]",this.saveOnlineFormData.dataList[fieldname])
            for(var k = 0;k<this.saveOnlineFormData.dataList[fieldname].length;k++){
              if(this.saveOnlineFormData.dataList[fieldname][k].id == zcf.id){
                this.saveOnlineFormData.dataList[fieldname][k] = zcf
                flagInfo = 1;
              }
              if(this.saveOnlineFormData.dataList[fieldname][k].tableTypeCode =='hanDongLinkDown' || this.saveOnlineFormData.dataList[fieldname][k].linkDowmIz =='1'){
                //判断当前组件类型是否是linkDown相关组件
                nextLinkDown(this.saveOnlineFormData.dataList[fieldname][k].linkDowmFieldNext,this.saveOnlineFormData.dataList[fieldname][k].commonLinkDownCodeChild)
              }
            }
            if(flagInfo == 0){
              //this.saveOnlineFormData.dataList[fieldname].push(zcf);
              this.saveOnlineFormData.dataList[fieldname] = zcf.commonDataInfo
            }
            console.log("this.saveOnlineFormData.dataList2=",this.saveOnlineFormData.dataList)
          }
        }
      },
      //设置下一级的linkDown 下拉框的值
      nextLinkDown(fieldName,childrenLinkDown){
        console.log("nextLinkDown fieldName=",fieldName)
        for(var i = 0;i<this.onlineForm.onlineFormData.length;i++){
          console.log(this.onlineForm.onlineFormData[i])
          console.log(this.onlineForm.onlineFormData[i].id)
          console.log(zcf.cgformHeadId)
          if(this.onlineForm.onlineFormData[i].id == zcf.cgformHeadId){
            var flagInfo =0;
            for(var k = 0;k<this.saveOnlineFormData.dataList[this.onlineForm.onlineFormData[i].id].length;k++){
              if(this.saveOnlineFormData.dataList[this.onlineForm.onlineFormData[i].id][k].dbFieldName == fieldName){
                this.saveOnlineFormData.dataList[this.onlineForm.onlineFormData[i].id][k].commonDictCode = childrenLinkDown
              }
            }
          }
        }
      },
      /** 加签 */
      handleAddSign() {
        this.addSignOpen = true;
        this.addSignTitle = "前加签流程";
      },
      changeAddSignType(val) {
        this.addSignForm.addSignType = val;
        if(this.addSignForm.addSignType === 0) {
          this.addSignTitle = "前加签流程";
        }
        if(this.addSignForm.addSignType === 1) {
          this.addSignTitle = "后加签流程";
        }
        if(this.addSignForm.addSignType === 2) {
          this.addSignTitle = "多实例加签流程";
        }
        console.log("changeAddSignType =",val);
        console.log("this.addSignTitle =",this.addSignTitle);
      },
      /** 加签任务 */
      addSignComplete() {
        if (!this.addSignForm.addSignUsers ) {
            this.$message.error("请选择用户");
            return;
        }
        // 流程信息
        this.addSignForm.deployId = this.$route.query && this.$route.query.deployId;
        this.addSignForm.taskId = this.$route.query && this.$route.query.taskId;
        this.addSignForm.procInsId = this.$route.query && this.$route.query.procInsId;
        this.addSignForm.instanceId = this.$route.query && this.$route.query.procInsId;
        // 初始化表单
        this.addSignForm.procDefId = this.$route.query && this.$route.query.procDefId;
        this.addSignForm.businessKey = this.$route.query && this.$route.query.businessKey;
        this.addSignForm.category = this.$route.query && this.$route.query.category;
        this.addSignForm.dataId = this.$route.query && this.$route.query.businessKey;
        //节点类型
        this.addSignForm.nodeType = this.$route.query && this.$route.query.nodeType;
        //online表单id和数据id
        this.addSignForm.onlineId = this.$route.query && this.$route.query.onlineId;
        if (this.addSignForm.category === 'online') {
          this.addSignForm.onlineDataId = this.$route.query && this.$route.query.businessKey;
        }  
        //对formdesigner后续加签审批的时候需要用到
        this.addSignForm.values = this.taskForm.values;
        console.log("this.addSignForm=",this.addSignForm);
        
        if(this.addSignForm.addSignType === 2) {
          multiInstanceAddSignTask(this.addSignForm).then(response => {
          this.$message.success(response.message);
          this.addSignOpen = false;
          this.goBack();
          });
        }
        else {
          addSignTask(this.addSignForm).then(response => {
          this.$message.success(response.message);
          this.addSignOpen = false;
          this.goBack();
          });
        }
      },
      
      /** 跳转 */
      handleJump() {
        this.jumpOpen = true;
        this.jumpTitle = "跳转流程";
        this.jumpNodeLoading = true
        userTaskList({ taskId: this.taskForm.taskId }).then((res) => {
          this.jumpNodeLoading = false
          this.jumpNodeData = res.result
        })
      },
      jumpComplete() {
        if (this.selectedRows.length < 1) {
          this.$message.warning('请选择跳转节点')
          return
        }
        // 流程信息
        this.jumpForm.deployId = this.$route.query && this.$route.query.deployId;
        this.jumpForm.taskId = this.$route.query && this.$route.query.taskId;
        this.jumpForm.procInsId = this.$route.query && this.$route.query.procInsId;
        this.jumpForm.instanceId = this.$route.query && this.$route.query.procInsId;
        // 初始化表单
        this.jumpForm.procDefId = this.$route.query && this.$route.query.procDefId;
        this.jumpForm.businessKey = this.$route.query && this.$route.query.businessKey;
        this.jumpForm.category = this.$route.query && this.$route.query.category;
        this.jumpForm.dataId = this.$route.query && this.$route.query.businessKey;
        //节点类型
        this.jumpForm.nodeType = this.$route.query && this.$route.query.nodeType;
        //online表单id和数据id
        this.jumpForm.onlineId = this.$route.query && this.$route.query.onlineId;
        if (this.jumpForm.category === 'online') {
          this.jumpForm.onlineDataId = this.$route.query && this.$route.query.businessKey;
        }  
        //对formdesigner后续加签审批的时候需要用到
        this.jumpForm.values = this.taskForm.values;
        //目标选择的节点信息
        this.jumpForm.targetActId = this.selectedRows[0].id;
        this.jumpForm.targetActName = this.selectedRows[0].name;
        console.log("this.jumpForm=",this.jumpForm);
        jumpTask(this.jumpForm).then(res => {
          if (res.success) {
            this.$message.success('跳转成功')
            this.jumpOpen = false;
            this.goBack();
          } else {
            this.$message.error('跳转失败：' + res.message)
          }
        });
      },
      
      /**
       * 跳转节点列表选择
       */
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      
      /** 驳回任务 */
      handleReject() {
        this.rejectOpen = true;
        this.rejectTitle = "驳回流程";
      },
      /** 驳回任务 */
      taskReject() {
        this.$refs["taskForm"].validate(valid => {
          if (valid) {
            rejectTask(this.taskForm).then(res => {
              this.$message.success(res.message);
              this.goBack();
            });
          }
        });
      },
      /** 可退回任务列表 */
      handleReturn() {
        this.returnOpen = true;
        this.returnTitle = "退回流程";
        returnList(this.taskForm).then(res => {
          this.returnTaskList = res.result;
          if(this.taskForm.hasOwnProperty("values")) {
            this.taskForm.values = null;
          }
        })
      },
      /** 提交退回任务 */
      taskReturn() {
        this.$refs["taskForm"].validate(valid => {
          if (valid) {
            if(this.taskForm.targetKey != '') {
              returnTask(this.taskForm).then(res => {
              this.$message.success(res.message);
              this.goBack()
              });
            }
            else {
              this.$message.error("请选择退回目标节点！");
            }
          }
        });
      },
      /** 取消回退任务按钮 */
      cancelTask() {
        this.taskForm.returnTaskShow = false;
        this.taskForm.defaultTaskShow = true;
        this.taskForm.sendUserShow = true;
        this.returnTaskList = [];
      },
      /** 委派任务 */
      submitDeleteTask() {
        this.$refs["taskForm"].validate(valid => {
          if (valid) {
            delegate(this.taskForm).then(response => {
              this.$message.success(response.message);
              this.goBack();
            });
          }
        });
      },
      /** 取消回退任务按钮 */
      cancelDelegateTask() {
        this.taskForm.delegateTaskShow = false;
        this.taskForm.defaultTaskShow = true;
        this.taskForm.sendUserShow = true;
        this.returnTaskList = [];
      },
    }
  };
</script>
<!-- <style lang="scss" scoped> -->
<style lang="less" scoped>
  .test-form {
    margin: 15px auto;
    width: 800px;
    padding: 15px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-bottom: 20px;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .highlight.djs-shape .djs-visual> :nth-child(1) {
    fill: green !important;
    stroke: green !important;
    fill-opacity: 0.2 !important;
  }

  .highlight.djs-shape .djs-visual> :nth-child(2) {
    fill: green !important;
  }

  .highlight.djs-shape .djs-visual>path {
    fill: green !important;
    fill-opacity: 0.2 !important;
    stroke: green !important;
  }

  .highlight.djs-connection>.djs-visual>path {
    stroke: green !important;
  }

  .highlight-todo.djs-connection>.djs-visual>path {
    stroke: orange !important;
    stroke-dasharray: 4px !important;
    fill-opacity: 0.2 !important;
  }

  .highlight-todo.djs-shape .djs-visual> :nth-child(1) {
    fill: orange !important;
    stroke: orange !important;
    stroke-dasharray: 4px !important;
    fill-opacity: 0.2 !important;
  }

  .overlays-div {
    font-size: 10px;
    color: red;
    width: 100px;
    top: -20px !important;
  }
  
  .el-form-item {
      margin-bottom: 20px;
  }
  
  .el-dialog__body{//设置el-dialog高度信息
          height: auto;
          overflow: hidden;
          overflow-y: auto;
  }
  
  .el-loading-mask {//设置流程图上面的一层屏蔽层，否则影响其它窗口操作
    background-color: initial;
    z-index: 200;
  }
  
  .bpmn-modeler {
      ::v-deep {
        .el-aside,.djs-palette{
          display: none;
        }
        .el-header{
          // border-bottom: none !important;
          padding: 0;
          &>div{
            justify-content: right !important;
            &>div:first-child{
              &>.el-button:nth-child(2),&>.el-button:nth-child(6),&>.el-button:nth-child(7){
                display: none;
              }
              &>div{
                display: none !important;
              }
            }
            &>div:last-child{
              display: none;
            }
          }
        }
        .djs-group * {
          pointer-events: none;
          user-select: none;
          -webkit-user-drag: none;
          -khtml-user-drag: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-drag: none;
        }
        .djs-group *:not(input[type="text"]) {
          pointer-events: none;
        }
        .highlight.djs-shape .djs-visual > :nth-child(1) {
          fill: green !important;
          stroke: green !important;
          fill-opacity: 0.2 !important;
        }
  
        .highlight.djs-shape .djs-visual > :nth-child(2) {
          fill: green !important;
        }
  
        .highlight.djs-shape .djs-visual > path {
          fill: green !important;
          fill-opacity: 0.2 !important;
          stroke: green !important;
        }
  
        .highlight.djs-connection > .djs-visual > path {
          stroke: green !important;
        }
  
        .highlight-todo.djs-connection > .djs-visual > path {
          stroke: orange !important;
          stroke-dasharray: 4px !important;
          fill-opacity: 0.2 !important;
        }
  
        .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
          fill: orange !important;
          stroke: orange !important;
          stroke-dasharray: 4px !important;
          fill-opacity: 0.2 !important;
        }
  
        .overlays-div {
          font-size: 10px;
          color: red;
          width: 100px;
          top: -20px !important;
        }
      }
    }
</style>
